<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>mini-vue</title>
</head>
<body>
  <div>
    <input type="text" id="input-msg">
    <p id="output-msg"></p>
  </div>
</body>
<script>
  const _input = document.querySelector('#input-msg')
  const _output = document.querySelector('#output-msg')
  const obj = {
    msg: 'hello world'
  }
  key = 'msg'
  val = obj[key]
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: () => {
      return val
    },
    set: (newVal) => {
      _output.innerHTML = newVal
    }
  })
 
  _input.value = obj.msg
  _input.addEventListener('input', (event) => {
    obj.msg = event.target.value
  })

</script>
</html>